<template>
  <a-modal v-model="visible" title="分享推广" :maskClosable="false" width="70%" centered :footer="null">
    <div class="share-container">
      <div class="menu-box">
        <a-menu v-model="selectedKeys">
          <a-menu-item key="qrCode">活动二维码</a-menu-item>
          <a-menu-item key="insertGzh">插入公众号</a-menu-item>
          <a-menu-item key="link">活动链接</a-menu-item>
        </a-menu>
      </div>
      <div class="content">
        <div v-if="selectedKeys[0] === 'qrCode'" class="qr-code">
          <h6>扫描二维码进入活动详情</h6>
          <div>
            <span>邀约技巧：</span>
            <a href="https://www.yuque.com/hbkj2024/mdvank/mnggcorg729kh0gv?singleDoc#%20" target="_blank">
              如何增加群发提醒效果。
            </a>
          </div>
          <img class="codeImg" :src="qrCodeImg" />
          <div>
            <a-button type="primary" ghost @click="handleDownloadQrcode">
              下载二维码
            </a-button>
          </div>
        </div>
        <div v-if="selectedKeys[0] === 'link'" class="link-box">
          <h3>可插入短信、网页等场景宣传，点击直接跳转活动详情页</h3>
          <span>注意：暂不支持PC端打开跳转</span>
          <div>
            <span>{{ linkUrl }}</span>
            <a-button type="primary" ghost @click="() => handleCopy(linkUrl)">
              复制
            </a-button>
          </div>
        </div>
        <div v-if="selectedKeys[0] === 'insertGzh'" class="insert-gzh">
          <h3>插入教程：</h3>

          <span>
            您可以在您的公众号菜单栏或推文中插入您的链接。插入小程序所需的AppID和专属小程序路径在本页复制即可。
          </span>

          <a
            href="https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzk0OTcyMTI5MQ==&action=getalbum&album_id=3567617834689740804#wechat_redirect"
            target="_blank"
          >
            参考插入公众号样例
          </a>

          <a href="https://mp.weixin.qq.com/s/dqmOxFpD9PoZy1NHtHLoqw" target="_blank">公众号运营技巧</a>

          <span>请复制以下本活动页面路径，插入到公众号</span>

          <div>
            <span> 小程序APPID：{{ appid }} </span>
            <a-button type="primary" ghost @click="() => handleCopy(appid)">
              复制
            </a-button>
          </div>

          <div>
            <span> 小程序路径：{{ xcxUrl }} </span>
            <a-button type="primary" ghost @click="() => handleCopy(xcxUrl)">
              复制
            </a-button>
          </div>

          <h5>一、绑定小程序（已绑定可跳过）：</h5>

          <span>
            登陆公众号平台，进入【广告与服务】-【小程序管理】。如未开通小程序，则需要点击开通。点击关联小程序。搜索本小程序名称或输入AppID，绑定小程序。
          </span>

          <h5>二、插入到公众号菜单：</h5>

          <span>
            登陆公众号平台，进入【内容与互动】-【自定义菜单】。添加菜单，【消息类型】选择【跳转小程序】，按提示选择当前小程序，输入本页提供的专属小程序路径，保存并发布即可。
          </span>

          <viewer :images="[stepImg1]">
            <img class="step-img" :src="stepImg1" />
          </viewer>

          <h5>三、插入到公众号文章：</h5>

          <span>
            登陆公众号平台，编辑公众号文章时，在图文编辑器顶部选择【小程序】，选择小程序（搜索本小程序名称或者输入AppID），然后输入本页提供的专属小程序路径，即可实现将小程序插入推文。
          </span>

          <viewer :images="[stepImg2]">
            <img class="step-img" :src="stepImg2" />
          </viewer>

          <h5>四、更多运营技巧或咨询客服请关注“商协邦服务”公众号</h5>
          <viewer :images="[shangxiebangQrcode]">
            <img class="shangxiebang_qrcode" :src="shangxiebangQrcode" width="200px" />
          </viewer>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { CreateDetailsQrcode, generateUrlLink } from '@/api/activity/activity'
import { getAuthStatus } from '@/api/system/system'
import { TENANTID } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  data() {
    return {
      selectedKeys: ['qrCode'],
      visible: false,
      id: undefined,
      title: undefined,
      qrCodeImg: undefined,
      linkUrl: '',
      gzhLinkUrl: '',
      stepImg1: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step1.jpg',
      stepImg2: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/official-step2.jpg',
      appid: '',
      xcxUrl: '',
      shangxiebangQrcode: 'https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/shangxiebang_qrcode.png'
    }
  },
  methods: {
    async GetAuthStatus() {
      let res = await getAuthStatus({
        authType: 2,
        tenantId: Vue.ls.get(TENANTID),
        // redirectUri: process.env.VUE_APP_MODEL_BASE_URL + '/system/miniProgramManager'
        redirectUri: `${window.origin + process.env.VUE_APP_API_BASE_URL}/system/miniProgramManager`
      })
      if (res && res.data) {
        this.appid = res.data.appid
      }
    },
    async getDetailsQrcode() {
      let res = await CreateDetailsQrcode(this.id)
      this.qrCodeImg = res.data || ''
    },
    async activityGenerateUrlLink() {
      const res = await generateUrlLink({
        path: 'pages/activity/activityDetails/main',
        query: this.id
      })
      this.linkUrl = res.data
    },
    openModel(id) {
      this.id = id
      this.getDetailsQrcode()
      this.activityGenerateUrlLink()
      this.GetAuthStatus()
      this.visible = true
      this.xcxUrl = `pages/base/startPage/main?path=activityDetails&query={"id":${id}} `
    },
    handleDownloadQrcode() {
      window.open(this.qrCodeImg + `?attname=${this.title}.jpg`, '_self')
    },
    async handleCopy(text) {
      this.$copyText(text)
        .then(message => {
          this.$message.success('复制成功')
        })
        .catch(err => {
          this.$message.error('复制失败')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.share-container {
  display: flex;
  gap: 12px;
  .menu-box {
    width: 150px;
  }
  .content {
    flex: 1;
    padding: 16px;
    background: #f7f8fa;
    border-radius: 8px;
    min-height: 424px;
    max-height: 660px;
    overflow-y: auto;
    .qr-code {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 16px;
      .codeImg {
        width: 280px;
        height: 280px;
      }
    }
    .link-box {
      display: flex;
      flex-direction: column;
      gap: 16px;
      h3 {
        color: #1d2129;
        font-size: 14px;
        line-height: 22px;
      }
      > span {
        color: #4e5969;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
      }
      > div {
        display: flex;
        align-items: center;
        gap: 24px;
        > span {
          color: #1d2129;
          font-size: 14px;
          font-weight: 400;
          line-height: 22px;
        }
      }
    }
    .insert-gzh {
      .step-img {
        width: 80%;
      }
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
  }
}
</style>
